import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.css";

export default class Footer extends Component {

  static propTypes = {
    todos: PropTypes.array.isRequired,
    checkAllTodo: PropTypes.func.isRequired,
  };

  handleCheckAll = (e) => {
    const { checked } = e.target;
    this.props.checkAllTodo(checked);
  };

  clearAllDone = () => {
    this.props.clearAllDone();
  }

  render() {
    // 获取props中的todos数组
    const { todos } = this.props;
    // 过滤出已完成任务的长度
    const checkedLen = todos.filter((item) => item.done).length;
    return (
      <div className="todo-footer">
        <label>
          {/* 全选按钮，根据已完成任务的数量和总任务数量判断是否选中，点击时调用handleCheckAll方法 */}
          <input
            type="checkbox"
            checked={
              checkedLen === todos.length && todos.length > 0 ? true : false
            }
            onChange={(e) => this.handleCheckAll(e)}
          />
        </label>
        <span>
          {/* 显示已完成任务的数量和总任务数量 */}
          <span>已完成{checkedLen}</span> / 全部{todos.length}
        </span>
        {/* 清除已完成任务的按钮 */}
        <button className="btn btn-danger" onClick={this.clearAllDone}>清除已完成任务</button>
      </div>
    );
  }
}
